import React, { Component } from 'react'
import { List, Card, Button } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import withRouter from '../../utils/withRouter'
import './index.less'
import {reqCategoryName} from '../../api/api'

const BASE_IMG_URL = 'http://47.102.40.110:5000/upload/'  // 上传图片的基础路径

class ProductDetail extends Component {

  state = {
    cName1: '',
    cName2: ''
  }

  async componentDidMount () {
    // 显示所属分类
    const {pCategoryId, categoryId} = this.props.location.state
    if (pCategoryId ==='0') {
      const result = await reqCategoryName (categoryId)
      this.setState ({cName1: result.data.name})
    }else {
      const results = await Promise.all ([reqCategoryName (pCategoryId), reqCategoryName (categoryId)])
      const cName1 = results[0].data.name
      const cName2 = results[1].data.name
      this.setState ({cName1, cName2})
    }
  }

  render() {

    const {cName1, cName2} = this.state

    // 跳转传递过来的product参数
    const product = this.props.location.state
    const title = (
      <span>
        <Button
          type='link'
          onClick={() => this.props.navigate(-1)}>
          <ArrowLeftOutlined style={{ marginRight: 5, fontSize: 20 }} />
        </Button>
        <span>商品详情</span>
      </span>)

    return (
      <Card className='product-detail' title={title} style={{ width: '100%', height: '100%' }}>
        <List>
          <List.Item>
            <span className='left' >商品名称:</span>
            <span>{product.name}</span>
          </List.Item>
          <List.Item>
            <span className='left'>商品描述:</span>
            <span>{product.desc}</span>
          </List.Item>
          <List.Item>
            <span className='left'>商品价格:</span>
            <span>{product.price}</span> 
          </List.Item>
          <List.Item>
            <span className='left'>所属分类:</span>
            <span>{cName1} {cName2? '-->'+ cName2 : ''}</span>
          </List.Item>
          <List.Item>
            <span className='left'>商品图片:</span>
            <span>
            {
                product.imgs.length>0?(
                  product.imgs.map(img => {
                    return <img  className='productImg' src={BASE_IMG_URL + img} alt='img' key={img}/>
                  })
                ):'暂无图片'
              }
            {/* <img className='productImg' src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' alt='img' style={{width:100,height:100}}/>
            <img className='productImg' src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' alt='img' style={{width:100,height:100}}/> */}
            </span>
          </List.Item>
          <List.Item>
            <span className='left'>商品详情:</span>
            <span dangerouslySetInnerHTML={{__html: product.detail }}></span>
          </List.Item> 
        </List>
      </Card>
    )
  }
}

export default withRouter (ProductDetail)

